<template>
    <div>
        <el-card>
            <!-- default-expand-all -->
            <el-table :data="permissionData" style="width: 100%;margin-bottom: 20px;" empty-text="暂无数据" row-key="id"
                border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="name" label="名称" width="width">
                </el-table-column>
                <el-table-column prop="code" label="权限值" width="width">
                </el-table-column>
                <el-table-column prop="toCode" label="跳转权限值" width="width">
                </el-table-column>
                <el-table-column prop="prop" label="操作" width="300" align="center">
                    <template slot-scope="{row,$index}">
                        <el-button type="primary" icon="el-icon-plus" @click="addPermission(row)"></el-button>
                        <el-button type="success" icon="el-icon-edit" @click="editPermission(row)"></el-button>
                        <el-popconfirm style="margin-left: 10px;" :title="`确定${row.name}删除吗？`"
                            @onConfirm="deletePermission(row)">
                            <el-button slot="reference" type="danger" icon="el-icon-delete"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加|修改菜单弹框 -->
        <el-dialog :title="dialogType" :visible.sync="dialogVisible" width="50%">
            <span>
                <el-form :model="permission" ref="form" :rules="permissionRules" label-width="110px">
                    <el-form-item label="父集名称" v-if="dialogType=='添加功能'">
                        <el-input v-model="supersetName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="permission.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="功能权限值" prop="code">
                        <el-input v-model="permission.code" placeholder="请输入功能权限值"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转路由权限值" v-if="dialogType=='添加功能'||dialogType=='修改功能'">
                        <el-input v-model="permission.toCode" placeholder="请输入跳转功能权限值"></el-input>
                    </el-form-item>
                </el-form>

            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAddOrUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "Permission",
        mounted() {
            this.getPermission()
        },
        data() {
            return {
                permissionData: [], // 菜单数据
                dialogVisible: false, // 是否显示弹框
                dialogType: '', // 弹框的类型
                isAdd: false, // 是否是添加弹框
                permission: { //收集菜单信息
                    name: "", // 菜单名称
                    code: "", // 权限值
                    level: '', // 所在的层级
                    pid: '', // 父集的id
                    type: '', // 菜单的类型
                    toCode: "" // 跳转权限值
                },
                supersetName: '', // 父集名称
                permissionRules: { // 表单验证规则
                    name: [
                        { required: true, message: '请输入名称', trigger: 'change' },
                    ],
                    code: [
                        { required: true, message: '请输入功能权限值', trigger: 'change' },
                    ],
                },

            }
        },
        methods: {
            // 获取菜单
            async getPermission() {
                const result = await this.$api.permission.reqGetPermission()
                if (result.code == 20000) {
                    this.permissionData = result.data.children
                }
            },
            // 添加菜单
            addPermission(row) {
                // 清空数据
                this.permission.name = ''
                this.permission.code = ''
                this.permission.level = ''
                this.permission.pid = ''
                this.permission.type = ''
                this.permission.toCode = ''
                this.supersetName = ''

                if (row.level == 1) { // 一级菜单
                    this.dialogType = '添加一级菜单'
                } else if (row.level == 2) { // 二级菜单
                    this.dialogType = '添加二级菜单'
                } else if (row.level == 3) { // 功能
                    this.dialogType = '添加功能'
                    this.supersetName = row.name // 显示父集名称
                } else { // 最小功能点
                    return; //  ...
                }
                this.dialogVisible = true // 显示弹框
                this.isAdd = true // 当前是添加弹框
                this.permission.level = row.level + 1 // 储存所在的层级（父集的层级+1）
                this.permission.pid = row.id
                this.permission.type = row.type
            },
            // 修改菜单
            editPermission(row) {
                if (row.level == 1) { // 一级菜单
                    this.dialogType = '修改一级菜单'
                } else if (row.level == 2) { // 二级菜单
                    this.dialogType = '修改二级菜单'
                } else if (row.level == 3) { // 功能
                    this.dialogType = '修改三级菜单'
                } else { // 最小功能点
                    this.dialogType = '修改功能'
                    this.supersetName = row.name // 显示父集名称
                }
                this.dialogVisible = true // 显示弹框
                this.isAdd = false // 当前是添加弹框
                this.permission.level = row.level // 储存所在的层级
                this.permission.id = row.id
                this.permission.type = row.type
                this.permission.name = row.name
                this.permission.code = row.code
                this.permission.toCode = row.toCode
            },
            // 确认添加/修改菜单
            confirmAddOrUpdate() {
                // 表单验证
                this.$refs.form.validate(async (valid) => {
                    if (valid) { // 验证通过
                        if (this.isAdd) { // 添加菜单
                            const result = await this.$api.permission.reqAddPermission(this.permission)
                            if (result.code == 20000) {
                                this.getPermission() // 重新获取菜单
                                this.$message({
                                    type: 'success',
                                    message: '添加成功！'
                                })
                                this.dialogVisible = false // 关闭弹框
                            }
                        } else { // 修改菜单
                            // 整理参数
                            // console.log(this.permission)
                            const result = await this.$api.permission.reqUpdatePermission(this.permission)
                            if (result.code == 20000) {
                                this.getPermission() // 重新获取菜单
                                this.$message({
                                    type: 'success',
                                    message: '修改成功！'
                                })
                                this.dialogVisible = false // 关闭弹框
                            }
                        }

                    } else { // 验证失败
                        return false;
                    }
                });
            },
            // 删除菜单
            async deletePermission(row) {
                //  递归删除子元素|这边不做递归删除也可以删除该元素的子元素
                // if (row.children && row.children.length) {
                //     row.children.forEach(item => {
                //         this.deletePermission(item)
                //     });
                // }
                const result = await this.$api.permission.reqDeletePermission(row.id)
                if (result.code == 20000) {
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    })
                    this.getPermission() // 重新获取菜单
                }
            },

        },
    }
</script>
<style scoped>

</style>